<template>
  <div id="printArea" ref="printArea">
    <div
      v-for="(pitem, pindex) in tableDatas"
      :key="pindex"
      :ref="
        (el) => {
          if (el) printAreaRefs[pindex] = el
        }
      "
      class="printContainer"
      style="padding: 12px; clear: both"
    >
      <div>
        <!--        <div-->
        <!--          class="row"-->
        <!--          style="-->
        <!--            position: fixed;-->
        <!--            top: 45px;-->
        <!--            left: 18px;-->
        <!--            z-index: 100;-->
        <!--            font-size: 15px;-->
        <!--          "-->
        <!--        >-->
        <!--          <span>-->
        <!--            编号：-->
        <!--            <b>{{ bloodMatch.MATCH_SHEET_NUM }}</b>-->
        <!--          </span>-->
        <!--        </div>-->
        <div
          style="
            position: relative;
            display: flex;
            flex-direction: column;
            font-size: 20px;
            text-align: center;
          "
        >
          <div style="width: 100%; padding: 4px 0">
            中国人民解放军总医院第一医学中心
          </div>
          <div style="width: 100%; padding: 4px 0; font-weight: bold">
            输血医学科交叉配血检验报告单
          </div>
          <span style="position: absolute; top: 0; right: 4px; font-size: 12px">
            DBT301-TR-BB-98
          </span>
          <div class="code"></div>
        </div>
      </div>
      <div class="h12"></div>
      <!--      <div class="row" style="display: flex; margin: 12px 0; font-size: 12px">-->
      <!--        <span>-->
      <!--          编号：-->
      <!--          <b>{{ bloodMatch.MATCH_SHEET_NUM }}</b>-->
      <!--        </span>-->
      <!--        &lt;!&ndash;        <span style="padding-right: 4px; margin-left: auto">&ndash;&gt;-->
      <!--        &lt;!&ndash;          申请单号：&ndash;&gt;-->
      <!--        &lt;!&ndash;          <b>{{ bloodMatch.APPLY_NUM }}</b>&ndash;&gt;-->
      <!--        &lt;!&ndash;        </span>&ndash;&gt;-->
      <!--      </div>-->
      <div style="height: 24px; line-height: 24px; overflow: hidden">
        <div class="percent25">
          <span class="font12">
            科别：
            <span class="underline">{{ bloodMatch.DEPT_NAME }}</span>
          </span>
        </div>
        <div class="percent25">
          <span class="font12">
            受血者：
            <span class="underline">{{ bloodMatch.PAT_NAME }}</span>
          </span>
        </div>
        <div class="percent25">
          <span class="font12">
            血型/Rh(D)：
            <span class="underline">
              {{ getAboValue(bloodMatch.PAT_BLOOD_GROUP) }}/{{
                getRhValue(bloodMatch.RH)
              }}
            </span>
          </span>
        </div>
        <div class="percent25">
          <span class="font12">
            直抗：
            <span class="underline">
              {{ bloodMatch.DAT || '' }}
            </span>
          </span>
        </div>
      </div>
      <div style="height: 24px; line-height: 24px; overflow: hidden">
        <div class="percent25">
          <span class="font12">
            ID号：
            <span class="underline">{{ bloodMatch.PATIENT_ID }}</span>
          </span>
        </div>
        <div class="percent25">
          <span class="font12">
            住院号：
            <span class="underline">{{ bloodMatch.INP_NO }}</span>
          </span>
        </div>
        <div class="percent25">
          <span class="font12">
            性别：
            <span class="underline">{{ bloodMatch.PAT_SEX }}</span>
          </span>
        </div>
        <div class="percent25">
          <span class="font12">
            出生日期：
            <span class="underline">
              {{ substr(bloodMatch.BIRTHDAY, 0, 10) }}
            </span>
          </span>
        </div>
      </div>
      <div style="height: 24px; line-height: 24px; overflow: hidden">
        <div class="percent50">
          <span class="font12">
            诊断：
            <span class="underline">
              {{ bloodMatch.BLOOD_DIAGNOSE.substr(0, 24) }}
            </span>
          </span>
        </div>
        <div class="percent25">
          <span class="font12">
            样本类型：
            <span class="underline">静脉血</span>
          </span>
        </div>
        <div class="percent25">
          <span class="font12">
            采集时间：
            <span class="underline">
              {{ substr(bloodMatch.GATHER_DATE, 0, 10) }}
            </span>
          </span>
        </div>
      </div>
      <div style="height: 16px !important; clear: both"></div>
      <div class="table">
        <table>
          <thead>
            <tr>
              <td align="center" rowspan="2">
                血袋号
                <br />
                配血试管
              </td>
              <td align="center" rowspan="2">
                血型
                <br />
                Rh(D)
              </td>
              <td align="center" rowspan="2">
                献血者
                <br />
                血员号
              </td>
              <td align="center" rowspan="2">标本位置</td>
              <td align="center" rowspan="2">血量(U)</td>
              <td align="center" rowspan="2">血液成分</td>
              <td align="center" rowspan="2">配血方法</td>
              <td
                align="center"
                :colspan="bloodMatchTypeName === 'hxb' ? 3 : 1"
              >
                子配血结果
              </td>
              <td align="center" rowspan="2" width="50">
                配血
                <br />
                结果
              </td>
              <td align="center" rowspan="2">配血者</td>
            </tr>
            <tr v-if="bloodMatchTypeName === 'hxb'">
              <td align="center">主侧</td>
              <td align="center">次侧</td>
              <td align="center" width="50">结果</td>
            </tr>
            <tr v-else>
              <td align="center">凝集强度</td>
            </tr>
          </thead>
          <tbody>
            <template v-for="(item, index) in pitem">
              <tr :key="index">
                <td align="center" style="height: 40px">
                  {{ item.BLOOD_ID }}
                  <br />
                  {{ item.BLOOD_ID_UP || '' }}
                </td>
                <td align="center">
                  {{ getAboValue(item.BLOOD_GROUP) }}
                  <br />
                  {{ getRhValue(item.RH) }}
                </td>
                <td align="center">
                  {{ item.NAME }}
                  <br />
                  {{ item.BLOOD_DONOR_ID }}
                </td>
                <td align="center">
                  {{ item.SPECIMEN_POSITION }}
                </td>
                <td align="center">
                  {{ item.BLOOD_CAPACITY }}
                </td>
                <td align="center">
                  {{ item.BLOOD_TYPE_NAME }}
                </td>
                <td align="center">
                  {{
                    getBloodMatchType(
                      item.blood_match_types,
                      'blood_match_type_name'
                    )
                  }}
                </td>
                <template v-if="bloodMatchTypeName === 'hxb'">
                  <td align="center">
                    {{
                      getBloodMatchType(item.blood_match_types, 'FIRST_RESULT')
                    }}
                  </td>
                  <td align="center">
                    {{
                      getBloodMatchType(item.blood_match_types, 'SECOND_RESULT')
                    }}
                  </td>
                  <td align="center">
                    {{
                      getBloodMatchType(item.blood_match_types, 'MATCH_RESULT')
                    }}
                  </td>
                </template>
                <template v-else>
                  <td align="center">
                    {{
                      getBloodMatchType(
                        item.blood_match_types,
                        'AGGREGATION_INTENSITY'
                      )
                    }}
                  </td>
                </template>
                <td align="center">
                  {{ item.MATCH_RESULT }}
                </td>
                <td align="center">
                  {{ item.MATCH_RESULT ? item.MATCH_OPERATOR : '' }}
                </td>
              </tr>
            </template>
            <template v-if="pitem.length < 5">
              <tr v-for="i in 5 - pitem.length" :key="`record${i}`">
                <td style="height: 40px"></td>
                <td></td>
                <td></td>
                <td v-if="bloodMatchTypeName === 'hxb'"></td>
                <td v-if="bloodMatchTypeName === 'hxb'"></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
      <div class="h12"></div>
      <div style="margin-top: 8px; font-size: 12px">
        <span class="percent23">输出者：{{ username }}</span>
        <span class="percent23">复核者：</span>
        <span class="percent27">打印日期：{{ time }}</span>
        <span class="percent27" style="text-align: right">
          配血日期：{{ bloodMatch.MATCH_DATE }}
        </span>
      </div>
      <div class="h12"></div>
    </div>
  </div>
</template>

<script>
  import { getCurrentTime } from '@/utils'
  import { chunkArray } from '@/utils/index'
  import { getLodop } from '@/utils/LodopFuncs'
  import { mapGetters } from 'vuex'
  export default {
    components: {},
    data() {
      return {
        tableDatas: [],
        printAreaRefs: [],
        user: this.$store.getters.name,
        time: getCurrentTime(),
        apply_num: '',
        bloodMatch: {},
        BLOOD_TYPE_NAME: '',
      }
    },
    computed: {
      ...mapGetters({
        username: 'user/username',
        printType: 'settings/printType',
        systemSet: 'initialData/systemSet',
      }),
      bloodMatchTypes() {
        let res = (this.bloodMatch && this.bloodMatch.blood_match_types) || []
        if (res.length === 0) {
          res = [{}]
        }
        return res
      },

      bloodMatchTypeName() {
        if (
          this.BLOOD_TYPE_NAME.indexOf('红细胞') > -1 ||
          this.BLOOD_TYPE_NAME === '浓缩血小板'
        ) {
          return 'hxb'
        } else {
          return 'xxb'
        }
      },
    },
    methods: {
      getTableDatas(bloodMatch) {
        let res = bloodMatch.BLOODS || [bloodMatch]
        const tableData = res.map((val) => {
          if (!val.blood_match_types) {
            val.blood_match_types = [{}, {}]
          }
          if (val.blood_match_types.length === 0) {
            val.blood_match_types = [
              {
                FIRST_RESULT: '',
                SECOND_RESULT: '',
                blood_match_type_name: '',
                MATCH_RESULT: '',
                DAT: '',
              },
              {
                FIRST_RESULT: '',
                SECOND_RESULT: '',
                blood_match_type_name: '',
                MATCH_RESULT: '',
                DAT: '',
              },
            ]
          }
          return val
        })
        const result = chunkArray(tableData, 5)
        return result
      },
      show(row) {
        this.printAreaRefs = []
        this.bloodMatch = row
        this.tableDatas = this.getTableDatas(row)
        this.apply_num = row.APPLY_NUM
        this.BLOOD_TYPE_NAME = row.BLOOD_TYPE_NAME
        if (this.printType === 'silent') {
          this.$nextTick(async () => {
            // let strHtml = this.$refs.printArea.innerHTML
            const bodyStyle = `@page {
        margin: 0 !important; /* 设置页边距为0 */
      }
      body {
        margin: 0 !important;
        padding: 15px 5px 0px 15px !important;
        
      }.percent23{float:left;width:23% !important;}.percent27{float:left;width:27% !important;}.percent50{float:left;width:50% !important;}.percent30{float:left;width:30% !important;}.percent20{float:left;width:20% !important;}.percent25{float:left;width:25% !important;}.percent16 {float:left;width: 16.6666666667%;}.percent33 {float:left;width: 33.3333333333%;}.h12{
    height:12px;
    clearable:both;
  }.font12{font-size:12px}#printArea{padding:12px;font-family:Microsoft YaHei !important;}.report-wrapper span{font-size:12px !important}.report-wrapper span.underline{padding-bottom:1px;margin-left:4px;border-bottom:grey 1px solid}#printArea{margin:0 12px;color:#000 !important}
  table{width:70%;border-collapse:collapse;border-top:1px solid #333}
  table,th,tr,td{border-bottom:1px solid #333}
  .table *{font-size:12px;line-height:18px;color:#000}
  .table table{width:100%;border-collapse:collapse}
  .table table td,.table table th{height:20px;vertical-align:center}
  .table .empty{line-height:40px;text-align:center;border:1px solid #000;border-top:none}
  .table input{width:100%;height:30px;font-size:12px;line-height:12px;border:none;border-bottom:1px solid #000000}
  .table input:focus{outline:1px solid #999999}
  .table .table th{font-size:15px}
  .table .foot{padding-top:20px}
  img,.code{position:absolute;top:15px;right:18px}
  img span,.code span{display:inline-block;width:200px;text-align:center}`
            this.printByLodop(this.printAreaRefs, bodyStyle, 1, 2100, 1380)
          })
        }
      },
      printByLodop(printAreaRefs, bodyStyle, type, width, height) {
        var LODOP = getLodop() //调用getLodop获取LODOP对象
        LODOP.PRINT_INIT('')
        LODOP.SET_PRINT_PAGESIZE(type, width, height)
        LODOP.SET_PRINT_STYLEA(3, 'FontName', '微软雅黑')
        printAreaRefs.forEach((el, index) => {
          let strHtml = `<style>${bodyStyle}</style><body>${el.innerHTML}</body>`
          LODOP.ADD_PRINT_HTM(0, 0, '96%', '96%', strHtml)
          LODOP.ADD_PRINT_TEXT(
            45,
            18,
            100,
            20,
            '编号:' + this.bloodMatch.MATCH_SHEET_NUM
          )
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
          LODOP.SET_PRINT_STYLEA(0, 'FontSize', 9)
          LODOP.ADD_PRINT_BARCODE(
            45,
            610,
            170,
            40,
            '128B',
            this.bloodMatch.APPLY_NUM
          )
          if (index < printAreaRefs.length - 1) {
            console.log('新一页')
            LODOP.NewPage() // 只在非最后一页添加新页面
          }
        })
        if (this.systemSet.silent_preview) {
          LODOP.PREVIEW()
        } else {
          console.log('***********print***********')
          // LODOP.PREVIEW()
          LODOP.PRINT()
        }
        // 打印回调函数
        LODOP.On_Return = (TaskID, Value) => {
          // TaskID 任务的唯一标识符。在执行打印、预览等操作时，LODOP 会为每个操作分配一个唯一的任务 ID。通过这个 ID 可以区分不同的操作任务
          // Value 0打印成功 1打印失败
          if (+Value === 0) {
            console.log('打印成功')
            this.printAreaRefs = []
          } else {
            console.log('放弃打印')
          }
        }
      },
      getAboValue(value) {
        if (value) {
          return value + '型'
        }
        return ''
      },
      getRhValue(value) {
        if (value) {
          return { '+': '阳性', '-': '阴性' }[value] || ''
        }
        return ''
      },
      substr(str, start, len) {
        if (str) {
          return str.substr(start, len)
        }
        return ''
      },
      getBloodMatchType(item, namekey) {
        const blood_match_type = item.length > 0 ? item[0] : {}
        let value = blood_match_type[namekey] || ''
        if (
          ['FIRST_RESULT', 'SECOND_RESULT', 'AGGREGATION_INTENSITY'].includes(
            namekey
          )
        ) {
          value =
            (value && Array.isArray(value) && value.join(',')) || value || ''
        }
        if (namekey === 'MATCH_RESULT') {
          value = blood_match_type['MATCH_RESULT'] || ''
        }
        return value
      },
    },
  }
</script>

<style lang="scss" scoped>
  .report-wrapper {
    padding: 12px;
    font-family: Microsoft YaHei !important;
    font-size: 12px !important;
    color: #000 !important;
    span {
      font-size: 12px !important;
      &.underline {
        display: block;
        height: 24px;
        line-height: 24px;
        overflow: hidden;
        height: 24px;
        overflow: hidden;
        padding-bottom: 1px;
        margin-left: 4px;
        border-bottom: grey 1px solid;
      }
    }
  }
  #printArea {
    margin: 0 12px;
    color: #000 !important;
    .printContainer:last-child {
      padding-top: 20px;
    }
  }
  table {
    width: 70%;
    border-collapse: collapse; /* 取消表格边框 */
    border-top: 1px solid #333;
  }
  table,
  th,
  tr,
  td {
    border-bottom: 1px solid #333; /* 表格横线 */
  }

  .table {
    * {
      // font-family: '宋体';
      font-size: 12px;
      line-height: 18px;
      color: #000;
    }

    table {
      width: 100%;
      border-collapse: collapse;

      td,
      th {
        height: 20px;
        vertical-align: center;
      }
    }
    .empty {
      line-height: 40px;
      text-align: center;
      border: 1px solid #000;
      border-top: none;
    }
    input {
      width: 100%;
      height: 30px;

      font-size: 12px;
      line-height: 12px;

      border: none;
      border-bottom: 1px solid #000000;

      &:focus {
        outline: 1px solid #999999;
      }
    }

    .table {
      th {
        font-size: 15px;
      }
    }

    .foot {
      padding-top: 20px;
    }
  }
  img,
  .code {
    position: absolute;
    top: 15px;
    right: 8px;
    span {
      display: inline-block;
      width: 200px;
      text-align: center;
    }
  }
  .percent23 {
    float: left;
    width: 23% !important;
  }
  .percent27 {
    float: left;
    width: 27% !important;
  }
  .percent50 {
    float: left;
    width: 50% !important;
  }
  .percent30 {
    float: left;
    width: 30% !important;
  }
  .percent20 {
    float: left;
    width: 20% !important;
  }
  .percent25 {
    float: left;
    width: 25% !important;
  }
  .percent16 {
    float: left;
    width: 16.6666666667%;
  }
  .percent33 {
    float: left;
    width: 33.3333333333%;
  }
</style>
